Process: Project 3 - Adam Kozsil

Part 1: Conceptulization

For my Project 3: Interaction assignment I was given the task to use the element of show/hide. When I got this topic I intially thought of using pop-up links but hadn't know how to. After reviewing code I've had on hand from both this class and previous semesters I've realized that I am able to utilize javascript code which uses a hide/show interaction to register hit detection. With multiple forms of show/hide interaction on hand I decided to use both in my website to display multiple ways to use this specific form of interaction.


I began by grabbing the code from my previous class and current class. The code which I used last semester was created for a bullethell style game. The class was also not focused on web design which gave me an opprotunity to develop on the code. Firstly I used methods learned in class to improve the html layout of the class, aswell as adjusted the bullethell game to make it more visually appealing by adjusting the colour, size, and how many circles appear on your screen

Part 1: Process Image with Adjusted Javascript Code
Process Image 1

Part 2: Pop-Up

In part 2, I began focusing on the pop-up link. While I've used interactive buttons I hadn't known how to create a pop-up window and so I began to do my research. One of the first few websites I found lead me to this linkedin article displaying how to create a very simple pop-up-window. (https://www.linkedin.com/advice/3/how-can-you-create-pop-up-window-html-javascript-skills-html) using the code provided within this website I was able to create a simple pop-up window which I then used to explain what users of the website are interacting with on the website. Afterwards, like before I built upon the code using methods learned in this class to make the code more appealing and functional such as changing the background colour to black and adjusting the size of the pop-up-window.

Part 2: Process Image of Pop-Up Window
Process Image 2